﻿@model FileUploadModel
@{
    Layout = null;
}

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fileUploadModal">
    上传文件
</button>
<!-- Modal -->
<div class="modal fade" id="fileUploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">文件上传</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="block">
                    <input id="txt_upload_inputfile" name="txt_upload_inputfile" @(Model.ShowMultiple ? "multiple" : "") type="file" />
                </div>
                <div class="block" id="list_files">
                </div>
                    <div id="kartik-file-errors"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" id="btn_fileUpload" class="btn btn-primary" title="保存">保存</button>
                </div>
            </div>
    </div>
</div>

<script src="~/js/bootstrap/fileinput/fileinput.min.js"></script>
<link href="~/js/bootstrap/fileinput/fileinput.min.css" rel="stylesheet" />
<script src="~/js/bootstrap/fileinput/locale-zh.js"></script>
<script>
    var inputId = '@Model.ControlId';
    var uploadUrl = '/SysComponent/Controll/UploadFiles';
    $(document).on('ready', function () {
        var $filecontrol = $("#txt_upload_inputfile");
        $filecontrol.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
            showUpload: false, //是否显示上传按钮
            showCaption: false,//是否显示标题
            dropZoneEnabled: false,
            browseClass: "btn btn-primary", //按钮样式
            mainClass: "input-group-lg",
            elErrorContainer: '#kartik-file-errors',
            showPreview: false,
            enctype: 'multipart/form-data',
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        });

        $("#btn_fileUpload").click(function () {
            $filecontrol.fileinput("upload");
        });
        $filecontrol.on("fileuploaded", function (event, data, previewId, index) {
            if (data.response == null) { 
                $.modalMsg("上传失败");
                return;
            }
            if (data.response.state == "success") {
                var files = data.response.data;
                $("#@Model.ControlId").val(data.response.data);
            }
            else { 
                $.modalMsg(data.response.message);
            }
        });

        $filecontrol.change(function () {
            var $listtip_files = $("#list_files");
            if ($(this).prop('files').length > 1) {
                $listtip_files.append('<span class="file-input-name">' + $(this)[0].files.length + ' files</span>');
            }
        });
        $("#fileinput-remove-button").click(function () { 
            $listtip_files.html('');
        });


    });
</script>
